<script>
import {defineComponent} from 'vue'
import store from "@/stores/store";
import axios from "axios";
import router from '../../router';

export default defineComponent({
  name: "order-page",
  data(){
    return{
        usr_account:{
            username:"",
            firstname:"",
            lastname:"",
            phone:"",
            email:"",
            addr1:"",
            addr2:"",
            city:"",
            state:"",
            zip:"",
            country:""
        },
        // 这里return回数据
        orders:[],
    }
  },
  created(){
    this.usr_account = store.getters.getAccount

    axios.get('http://localhost:8080/orders',{
        params:{
            userid:this.usr_account.username
        }
    }).then(res => {
        if(res.status === 200){
            console.log(res.data);
            this.orders = res.data.data;
        }else{
            console.log('请求失败')
        }
    }).catch(e =>{
        console.error(e)
    })
  },
  methods:{
    to_Account_Page(){
        router.push('/account');
    },
    to_Main_Page(){
        router.push('/index');
    }
  }
})
</script>

<template>
    <!-- 导航捏 -->
    <div class="crumb">
        <div class="w">
            <div class="crumb-content">
                <span class="link" @click="to_Main_Page">MyStore</span>
                <span>></span>
                <span class="link" @click="to_Account_Page">Account</span>
                <span>></span>
                <span class="link-text">My Order</span>
            </div>
        </div>
    </div>
    <div id="main">
        <!-- 表格 -->
        <div class="orderTable">
            <table id="tbl">
                <!-- 头部 -->
                <thead id="orderhead">
                    <tr>
                        <!--订单号-->
                        <th class="th" id="hid">Order ID</th>
                        <!-- 商品名 没有喵 所以写了发货时间 -->
                        <th class="th" id="hname">Order Date</th>
                        <!-- 单价 -->
                        <th class="th" id="hprice">Price</th>
                        <!-- 商品数量 -->
                        <th class="th" id="hcount">Count</th>
                        <!-- 总价 -->
                        <th class="th" id="htotal">Total($)</th>
                        <!-- 订单状态 -->
                        <th class="th" id="hstatus">Status</th>
                    </tr>
                </thead>
                <!-- 内容 -->
                <!-- 这里用v-for获取数据 -->
                <tbody class="orderbody"  v-for="order in orders">
                    <tr>
                        <!--订单号-->
                        <td class="td">{{ order.orderId }}</td>
                        <!-- 商品名 -->
                        <td class="td">{{ order.orderDate }}</td>
                        <!-- 单价 -->
                        <td class="td">{{ order.listPrice }}</td>
                        <!-- 商品数量 -->
                        <td class="td">{{ order.quantity }}</td>
                        <!-- 总价 -->
                        <td class="td">{{ order.totalPrice }}</td>
                        <!-- 订单状态 -->
                        <td class="td">{{ order.status }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<style scoped>

    #main{
        overflow: hidden;
        width: 1060px;
        margin: 10px auto 100px;
        border: 1px solid #e1e2e5;
        box-shadow: 0 2px 4px rgba(0,0,0,.14);
        background: #fff;
        border-radius: 4px;
    }

    .orderTable{
        padding:30px;
    }

    #orderhead{
        border-bottom: 1px solid #ddd;
    }

    .crumb{
        height: 50px;
        line-height: 50px;
        background: #eee;
        color: #888;
        font-size: 14px;
        border-top: 2px solid #215496;
        margin-bottom: 10px;
    }

    .w{
    width: 1080px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    /*清除浮动，查资料*/
    }

    .link{
        color: #999;
        cursor: pointer;
        text-decoration: none;
    }

    .link:hover{
        color: #215496;
    }

    .link-text{
        color: #999;
        text-decoration: none;
    }

    .th{
        text-align: center;
        padding:10px;
        /* color: #215496; */
    }

    #hid{
        width:20%;
    }

    #hname{
        width:70%;
    }

    .td{
        text-align: center;
        padding: 10px;
        /* border-top: 1px solid #ddd; */
    }
</style>